<template>
  <Checkbox
    class="custom-checkbox"
    :class="`custom-checkbox-${themeColor}`"
    :value="value"
    :indeterminate="indeterminate"
    :size="size"
    :disabled="disabled"
    @input="checkboxChange">
    <slot />
  </Checkbox>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    indeterminate: {
      type: Boolean,
      default: false
    },
    themeColor: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    checkboxChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    }
  }
}
</script>

<style lang="scss">
@import 'common/scss/color';

.custom-checkbox {
  color: $Color-text !important;
  user-select: none !important;
  margin-right: 0 !important;
  &.custom-checkbox-primary {
    .ivu-checkbox-checked {
      .ivu-checkbox-inner {
        border-color: $Color-primary;
        background-color: $Color-primary;
      }
    }
  }
  &.custom-checkbox-success {
    .ivu-checkbox-checked {
      .ivu-checkbox-inner {
        border-color: $Color-success;
        background-color: $Color-success;
      }
    }
  }
  &.custom-checkbox-warning {
    .ivu-checkbox-checked {
      .ivu-checkbox-inner {
        border-color: $Color-warning;
        background-color: $Color-warning;
      }
    }
  }
  &.custom-checkbox-danger {
    .ivu-checkbox-checked {
      .ivu-checkbox-inner {
        border-color: $Color-danger;
        background-color: $Color-danger;
      }
    }
  }
}
</style>
